<template>
  <div>
    <div id="case-list">
      <!-- BREADCRUMBS -->
      <div class="page-header">
        <div class="container">
          <h1 class="page-title pull-left">案例 CASE</h1>
          <ol class="breadcrumb">
            <li>
              <router-link :to="{ name: 'home'}">首页</router-link>
            </li>
            <!-- <li>
            <a href="#">Portfolio</a>
          </li> -->
            <li class="active">案例</li>
          </ol>
        </div>
      </div>
      <!-- END BREADCRUMBS -->
      <!-- PAGE CONTENT -->
      <div class="page-content">
        <div class="container">
          <!-- ITEM FILTERS -->
          <el-radio-group v-model="filter" size="small" style="margin-bottom: 30px;">
            <el-radio-button label="ALL">全部</el-radio-button>
            <el-radio-button label="WEB">网页设计</el-radio-button>
            <el-radio-button label="SOFT">软件界面</el-radio-button>
            <el-radio-button label="APP">移动APP</el-radio-button>
          </el-radio-group>
          <!-- END ITEM FILTERS -->
          <!-- PORTFOLIO ITEM WRAPPER -->
          <div class="portfolio-item-wrapper">
            <ul class="portfolio-item-list portfolio-isotope portfolio-nospace list-col-4">
              <li class="portfolio-item design">
                <div class="overlay"></div>
                <div class="info">
                  <h4 class="title">The Guitar</h4>
                  <p class="brief-description">Graphic Design</p>
                  <router-link class="btn" :to="{ name: 'case-single' , params:{'categoryId': 3, 'caseId':1}}">read more</router-link>
                </div>
                <div class="media-wrapper">
                  <img src="@/assets/img/portfolio/800x800/work1.png" alt="This is the description">
                </div>
              </li>
              <li class="portfolio-item ux">
                <div class="overlay"></div>
                <div class="info">
                  <h4 class="title">Skyscraper</h4>
                  <p class="brief-description">UX Design</p>
                  <a href="#" class="btn">read more</a>
                </div>
                <div class="media-wrapper">
                  <img src="@/assets/img/portfolio/800x800/work3.png" alt="Portfolio Thumbnail">
                </div>
              </li>
              <li class="portfolio-item photography">
                <div class="overlay"></div>
                <div class="info">
                  <h4 class="title">Heaven</h4>
                  <p class="brief-description">Photography</p>
                  <a href="#" class="btn">read more</a>
                </div>
                <div class="media-wrapper">
                  <img src="@/assets/img/portfolio/800x800/work4.png" alt="Portfolio Thumbnail">
                </div>
              </li>
              <li class="portfolio-item photography ux">
                <div class="overlay"></div>
                <div class="info">
                  <h4 class="title">Raining</h4>
                  <p class="brief-description">Photography</p>
                  <a href="#" class="btn">read more</a>
                </div>
                <div class="media-wrapper">
                  <img src="@/assets/img/portfolio/800x800/work5.png" alt="Portfolio Thumbnail">
                </div>
              </li>
              <li class="portfolio-item photography ui">
                <div class="overlay"></div>
                <div class="info">
                  <h4 class="title">The Edge</h4>
                  <p class="brief-description">UI &amp; UX Design</p>
                  <a href="#" class="btn">read more</a>
                </div>
                <div class="media-wrapper">
                  <img src="@/assets/img/portfolio/800x800/work6.png" alt="Portfolio Thumbnail">
                </div>
              </li>
              <li class="portfolio-item photography">
                <div class="overlay"></div>
                <div class="info">
                  <h4 class="title">The Light</h4>
                  <p class="brief-description">Photography</p>
                  <a href="#" class="btn">read more</a>
                </div>
                <div class="media-wrapper">
                  <img src="@/assets/img/portfolio/800x800/work7.png" alt="Portfolio Thumbnail">
                </div>
              </li>
              <li class="portfolio-item photography">
                <div class="overlay"></div>
                <div class="info">
                  <h4 class="title">Magical Tea</h4>
                  <p class="brief-description">Photography</p>
                  <a href="#" class="btn">read more</a>
                </div>
                <div class="media-wrapper">
                  <img src="@/assets/img/portfolio/800x800/work8.png" alt="Portfolio Thumbnail">
                </div>
              </li>
              <li class="portfolio-item ui">
                <div class="overlay"></div>
                <div class="info">
                  <h4 class="title">Skyscraper</h4>
                  <p class="brief-description">UI Design</p>
                  <a href="#" class="btn">read more</a>
                </div>
                <div class="media-wrapper">
                  <img src="@/assets/img/portfolio/800x800/work3.png" alt="Portfolio Thumbnail">
                </div>
              </li>
            </ul>
          </div>
          <!-- END PORTFOLIO ITEM WRAPPER -->

          <el-pagination background layout="prev, pager, next" :total="20" :page-size="8">
          </el-pagination>

        </div>
      </div>
      <!-- END PAGE CONTENT -->
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      filter: "ALL"
    };
  }
};
</script>

<style lang="less">
#case-list {
  .portfolio-item-list {
    // position: relative;
    // height: 570px;
    font-size: 0;
    .portfolio-item {
      // position: absolute;
      // left: 0px;
      // top: 0px;
      display: inline-block;
    }
  }
  .el-pagination {
    text-align: center;
  }
}
</style>
